import './Scss/BeamYard.scss'
import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { Http } from '../../../../Common/Api'
import { ICON } from '../../../../Common/Configure/Icon'

export const BeamYard001 = ({ number, NavEvent }) => {
    NavEvent.useSubscription(val => {
        const { organizationUuid } = val
        getBeamFactoryInfo({ url: `getConstructionBeamFactoryInfo`, data: { organizationUuid } })
    })

    const { run: getBeamFactoryInfo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { completeBeamNum, inStorageNum, installedNum, percent, totalBeamNum } = res
            setData([
                { uuid: '1', title: '梁场数量', value: number, unit: '座', icon: ICON['liangchangshuliang'] },
                { uuid: '2', title: '梁总数量', value: totalBeamNum, unit: '片', icon: ICON['liangzongshuliang'] },
                { uuid: '3', title: '生产完成数', value: completeBeamNum, unit: '片', icon: ICON['wanchengshu'] },
                {
                    uuid: '4',
                    title: '完成率',
                    value: parseInt(percent * 10000) / 100,
                    unit: '%',
                    icon: ICON['wanchengshuai'],
                },
                { uuid: '5', title: '存粱区', value: inStorageNum, unit: '片', icon: ICON['cunliangqu'] },
                { uuid: '6', title: '已安装', value: installedNum, unit: '片', icon: ICON['yianzhuang'] },
            ])
        },
    })

    const [Data, setData] = useState([
        { uuid: '1', title: '梁场数量', value: 0, unit: '座', icon: ICON['liangchangshuliang'] },
        { uuid: '2', title: '梁总数量', value: 0, unit: '片', icon: ICON['liangzongshuliang'] },
        { uuid: '3', title: '生产完成数', value: 0, unit: '片', icon: ICON['wanchengshu'] },
        { uuid: '4', title: '完成率', value: 0, unit: '%', icon: ICON['wanchengshuai'] },
        { uuid: '5', title: '存粱区', value: 0, unit: '片', icon: ICON['cunliangqu'] },
        { uuid: '6', title: '已安装', value: 0, unit: '片', icon: ICON['yianzhuang'] },
    ])
    return (
        <div className="BeamYard001">
            {Data.map(({ uuid, title, value, unit, icon }) => (
                <div key={uuid}>
                    {icon}
                    <div>
                        <div>
                            <div>{value}</div>
                            <div>{unit}</div>
                        </div>
                        <div>{title}</div>
                    </div>
                </div>
            ))}
        </div>
    )
}
